<template>
	<div>
		<uni-list>
			<uni-list-item title="承运商名称" :rightText="formData.carrierName" />
			<uni-list-item title="承运商类型" :rightText="carrierType_[formData.carrierType]" />
			<uni-list-item title="统一社会信用代码" :rightText="formData.registeredNo" />
			<uni-list-item title="法人姓名" :rightText="formData.legalPersonName" />
			<uni-list-item title="法人身份证" :rightText="formData.legalPersonIdCard" />
			<uni-list-item title="办公电话" :rightText="formData.officePhone" />
			<uni-list-item title="成立时间" :rightText="formData.establishTime" />
			<uni-list-item title="注册资本(万元)" :rightText="formData.registeredCapital" />
			<uni-list-item title="经营地址" :rightText="formData.businessDistrictName+''+formData.businessAddress" />
			<uni-list-item title="联系人" :rightText="formData.contactPerson" />
			<uni-list-item title="职务" :rightText="formData.contactPosition" />
			<uni-list-item title="联系电话" :rightText="formData.phone" />
			<uni-list-item title="电子邮箱" :rightText="formData.email" />
			<uni-list-item title="通讯地址" :rightText="formData.locationDistrictName+''+formData.locationAddress" />
			<uni-list-item title="自有车辆" :rightText="formData.ownVehicle" />
			<uni-list-item title="外部车辆" :rightText="formData.externalVehicle" />
			<uni-list-item>
				<template v-slot:body>
					<text style="font-size: 14px;color: #3b4144;overflow: hidden;width: 90px;">相关资料</text>
				</template>
				<template v-slot:footer>
					<div style="flex: 1;">
						<myfilepicker readonly :fileIdString="formData.workCardAttachment" :fileMediatype="'image'"></myfilepicker>
						<myfilepicker readonly :fileIdString="formData.idCardFrontAttachment" :fileMediatype="'image'"></myfilepicker>
						<myfilepicker readonly :fileIdString="formData.idCardBackAttachment" :fileMediatype="'image'"></myfilepicker>
						<myfilepicker readonly :fileIdString="formData.businessLicenseAttachment" :fileMediatype="'image'"></myfilepicker>
						<myfilepicker readonly :fileIdString="formData.otherAttachment" :fileMediatype="'all'"></myfilepicker>
					</div>
				</template>
			</uni-list-item>
			<uni-list-item title="备注" :rightText="formData.remark" />
		</uni-list>
		<view style="height: 20px;"></view>
		<view v-if="carrierContractList.length>0" style="position: relative;display: flex;flex-direction: row;align-items: center;padding: 12px 10px;font-weight: 400;">
			<view style="width: 4px;height: 12px;border-radius: 10px;background-color: #2979ff;margin-right: 6px"></view>
			<view style="display: flex;flex-direction: column;flex: 1;color: #333;">合同信息</view>
		</view>
		<!-- <template v-if="carrierContractList.length>0"><uni-tag style="margin-left: 15px;" :inverted="true" text="合同信息" type="primary" /></template> -->
		<view class="carrier" v-for="(item,index) in carrierContractList" :key="index">
			<view style="border-bottom: 0.5px solid rgb(237, 237, 237);">
				<view class="contract" style="background-color: #d9d9d9;width: 100px;height: 30px;border-radius: 20px 0 0;font-weight: bold;font-size: 15px;display: flex;justify-content: center;align-items: center;">
					<text style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;width: 80px;text-align: center;">
						{{item.contractName}}
					</text>
				</view>
			</view>
			<view style="margin: 10px;">
				<view style="display: flex;flex-direction: row;justify-content: space-between;">
					<text>{{item.oilCardRatio}}%油卡</text>
					<text>{{item.settlementMethod}}{{item.settlementDays}}天</text>
				</view>
				<view>
					<text>{{item.applicationScope}}</text>
				</view>
				<view style="display: flex;flex-direction: row;justify-content: space-between;">
					<text>{{item.contractDeposit}}元保证金&ensp;&ensp;已缴纳</text>
					<text>{{item.startTime}}~{{item.endTime}}</text>
				</view>
				<view style="margin-top: 10px;">
					<!--这里是文件-->
					<previewfilepicker  @clickFile="clickFile_attachments"  readonly limit="3"  :value="fileList_attachments[index]" file-extname="pdf,png,gif,jpg,jpeg,doc,docx" file-mediatype="all"></previewfilepicker>
				</view>
			</view>
			
		</view>
		<view v-if="carrierLineList.length>0" style="position: relative;display: flex;flex-direction: row;align-items: center;padding: 12px 10px;font-weight: 400;">
			<view style="width: 4px;height: 12px;border-radius: 10px;background-color: #2979ff;margin-right: 6px"></view>
			<view style="display: flex;flex-direction: column;flex: 1;color: #333;">常跑路线</view>
		</view>
		<!-- <template v-if="carrierLineList.length>0"><uni-tag style="margin-left: 15px;" :inverted="true" text="常跑路线" type="success" /></template> -->
		<view v-for="(item,index) in carrierLineList" :key="index" style="display: flex;flex-direction: row;padding: 10px;justify-content: space-between;background-color: white;margin: 10px;border-radius: 12px;">
			<view style="display: flex;flex-direction: column;">
				<view style="display: flex;align-items: center;">
					<view style="width: 25px;height: 25px;border: 1px solid rgb(91, 86, 86);display: flex;justify-content: center;align-items: center;">
						起
					</view>
					<view style="display: flex;flex-direction: column;margin-left: 10px;margin-right: 10px">
						<text>{{item.departDistrictName}}</text>
					</view>
				</view>
			    <view style="display: flex;align-items: center;margin-top: 15px;">
					<view style="width: 25px;height: 25px;border: 1px solid rgb(91, 86, 86);display: flex;justify-content: center;align-items: center;">
						止
					</view>
					<view style="display: flex;flex-direction: column;margin-left: 10px;margin-right: 10px">
						<text>{{item.arriveDistrictName}}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 50px;"></view>
	</div>
</template>

<script>
	import {
		getCarrierDetails
	} from '@/api/system/carrier.js'
	import {getFileList} from '@/api/system/uploadFile.js'
	import {getDicts} from '@/api/system/dict.js'
	import myfilepicker from '@/components/uploadFile/uploadFile.vue'
	import previewfilepicker from '@/components/my-file-picker.vue'
	export default {
		components: {
			myfilepicker,
			previewfilepicker
		},
		data() {
			return {
				formData:{}, //详情
				//合同集合
				carrierContractList:[],
				//常跑路线
				carrierLineList:[],
				//下拉框 ->承运商类型
				carrierType_: [],
				
				//合同附件
				fileList_attachments:[],
				carrierId: '',
			}
		},
		onLoad(e) {
			//根据客户id查询客户详情
			if (e.carrierId) {
				uni.showLoading({
					title: '正在加载',
				})
				this.carrierId = e.carrierId
				//获取承运商详情
				getCarrierDetails(e.carrierId).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.formData = res.data
						this.carrierContractList=this.formData.carrierContractList||[]
						//合同附件列表回显
						if(this.carrierContractList.length!==0)
						{
							this.carrierContractList.forEach((item,index)=>{
								if(item.attachments!==null)
								{
									let AllFileUrl=[];
									AllFileUrl=item.attachments.split(",")
									getFileList(AllFileUrl).then(res2=>{
										this.fileList_attachments[index]= res2.data.map((item2,index)=>{
											return {
												id:item2.id,
												url: item2.url,
												extname: item2.fileType,
												name: item2.name,
											}
										})
										this.$forceUpdate()
									})
								}
							})
						}
						this.carrierLineList=this.formData.carrierLineList||[]
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			}
		},
		created() {
			//获取承运商类型下拉框
			getDicts('carrier_type').then(res=>{
				res.data.forEach(item=>{
					this.carrierType_[item.dictValue]=item.dictLabel
				})
			})
		},
		methods: {
			//预览合同附件
			clickFile_attachments(e){
				if(e.tempFile.extname=='png'||e.tempFile.extname=='jpg'||e.tempFile.extname=='jpeg')  //预览图片
				{
					uni.previewImage({
					    current: 0, //预览图片的下标
					    urls: [e.tempFile.url] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					})
				}
				else  //pdf,png,gif,jpg,doc
				{
					uni.navigateTo({
						url: "/pages/common/fileView",
						success: (res) => {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit("dataFun", {
								data: {
									name: e.tempFile.name+'预览',
									fileSrc: e.tempFile.url,
									isFileDown: true
								},
							});
						},
					});
				}
			},
		},
	}
</script>

<style scoped>
::v-deep .uni-list-item__extra{
	flex: 1;
}
.carrier{
		min-height: 150px;
		margin: 10px;
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #ededed;
		background-color: #ffffff;
		font-size: 12px;
	}
	.contract::after{
	    content: "";
	    position: absolute;
	    width: 0;
	    height: 0;
	    left: 110px;
	    border-right: 3px solid transparent;
	    border-bottom: 30px solid transparent;
	    border-left: 16px solid #d9d9d9;
	    }
</style>